<template>
  <view class="p-20rpx border-rd-40rpx">
    <wd-collapse v-if="state.list.length > 0" v-model="state.collapseValue" accordion>
      <wd-collapse-item
        v-for="(item, index) in state.list"
        :key="index"
        :title="item.className"
        :name="item.classId"
      >
        <view v-for="(e, i) in item.studentProgressList" :key="i" class="items-2">
          <view class="flex items-center">
            <wd-img :src="e.headshot || defaultUserAvatar" size="70rpx" class="border-rd-[100%]" />
            <view class="view ml-12rpx flex-1 flex justify-between items-center">
              <view>
                <view class="text-[#3D3D3D] fw-700 text-24rpx mb-10rpx">{{ e.studentName }}</view>
                <text class="text-[#999999] text-20rpx">
                  学习时长：{{ formatDuration(e.totalDuration) }}
                </text>
              </view>
              <text class="text-[#3670F7] text-20rpx fw-500">{{ e.learnedProgress * 100 }}%</text>
            </view>
          </view>
        </view>
      </wd-collapse-item>
    </wd-collapse>
    <view class="empty" v-else>
      <wd-status-tip :image="emptyImage" tip="暂无数据" />
    </view>
  </view>
</template>

<script setup lang="ts">
/* 引入 接口 */
import { getCourseDataApi } from '@/service/edu/analysis/index'
/* 引入 暂无数据 - 图片 */
import emptyImage from '@/static/images/icons/empty.png'
/* 引入 图片 - 评论默认头像 */
import defaultUserAvatar from '@/static/images/comment/default_user.png'

/* 定义数据 */
const state = reactive({
  collapseValue: [],
  list: [],
})

/* 获取数据 */
async function getCourseData(courseId) {
  const res = await getCourseDataApi(courseId)
  console.log('[ res ] 🌸>', res)
  if (res?.code === 200) {
    state.list = res?.data || []
  }
}

/* 转换学习时长 */
function formatDuration(str) {
  const hours = Math.floor(str / 3600)
  const remainingSeconds = str % 3600
  const minutes = Math.floor(remainingSeconds / 60)
  const seconds = remainingSeconds % 60

  let result = ''
  if (hours > 0) {
    result += hours + '小时 '
  }
  if (minutes > 0) {
    result += minutes + '分钟 '
  }
  if (seconds >= 0) {
    result += seconds + '秒'
  }

  return result.trim()
}

onLoad(async (query) => {
  await getCourseData(query.courseId)
})
</script>

<style lang="scss" scoped>
:deep(.wd-collapse) {
  border-radius: 12rpx;
}

:deep(.wd-collapse-item__title) {
  font-size: 24rpx;
  font-weight: 700;
  color: #3d3d3d;
}

.items-2 {
  margin-bottom: 25rpx;
  .view {
    flex: 1;
    // padding-bottom: 12rpx;
	padding: 10rpx;
    border-bottom: solid 1rpx #e8e8e8;
  }
}

:deep(.wd-img) {
  .wd-img__image {
    border-radius: 100%;
  }
}
</style>
